<template>
  <div class="card" :style="{'background-color': cate.bg_color}">
    <q-img src="@/assets/images/hot-detail.webp" no-native-menu />
    <div class="card__text">
      <h3 class="h3 multi-line-ellipsis">{{ cate.name }}</h3>
      <q-btn no-caps outline rounded color="black" label="Buy now" size="17px" padding="12px" class="bottom-button" :style="{'color': cate.bg_color}"/>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { defineProps, computed } from 'vue'

type cate = {
  bg_color: string
  hot_image: string
  id: number
  name: string
}

const props = defineProps<{
  cate: cate
}>()

const darkenColor = (hexColor, factor = 0.2) => {
  // 去除#号
  hexColor = hexColor.replace('#', '');
  // 转换为RGB
  const r = parseInt(hexColor.substring(0, 2), 16);
  const g = parseInt(hexColor.substring(2, 4), 16);
  const b = parseInt(hexColor.substring(4, 6), 16);
  // 减少RGB值
  const darkenedR = Math.max(0, Math.floor(r * (1 - factor)));
  const darkenedG = Math.max(0, Math.floor(g * (1 - factor)));
  const darkenedB = Math.max(0, Math.floor(b * (1 - factor)));
  // 转换回十六进制并确保两位数格式
  const toHex = (c) => c.toString(16).padStart(2, '0');
  return `#${toHex(darkenedR)}${toHex(darkenedG)}${toHex(darkenedB)}`;
}

const deepColor = computed(() => {
  return (color) => {
    return darkenColor(color);
  }

})

</script>

<style scoped lang='less'>
.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 确保卡片有明确的高度 */
  border: solid 1px #e1e1e1;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  color: #1d1d1d;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  margin-bottom: 0 + 0;
  margin-inline-end: 0 + 0;

  .card__text {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 填充剩余空间 */
    padding: 50px;
    position: relative; /* 为按钮定位提供上下文 */

    .h3 {
      font-size: 25px;
      font-weight: 800;
      text-align: center;
      margin-bottom: 40px; /* 为按钮留出空间 */
    }

    /* 多行文本省略样式 */
    .multi-line-ellipsis {
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 限制最多3行 */
      overflow: hidden;
      text-overflow: ellipsis;
      max-height: 4.5em; /* 3行高度 (1.5em/行 * 3) */
      line-height: 1.5em; /* 确保行高一致 */
    }
  }
}
.bottom-button {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 60px);
  max-width: 200px;
  text-align: center;
  padding: 12px 0;
  font-weight: 600;
  font-size: 17px;
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

.bottom-button:hover {
  color: white;
  transform: translateX(-50%) scale(1.05);
}
</style>